import { useEffect, useRef } from "react"
import * as echarts from "echarts";

const option: any = {
  title: {
    text: '竞赛练',
    left: 135,
    top: "85%",
    textStyle: {
      color: "#79839E",
      fontSize: 16,
      align: "center"
    }
  },
  legend: {
    orient: 'vertical',
    left: 20,
    bottom: 50,
    textStyle: { color: "#fff", fontSize: 10 },
    itemWidth: 11,
    itemHeight: 6,
    height: 210,
  },
  series: [
    {
      name: '成绩',
      type: 'pie',
      radius: '77%',
      center: ['65%', '44%'],
      labelLine: {
        show: false
      },
      label: {
        show: false,
      },
      data: [
        { value: 10, name: '优秀 10%' },
        { value: 30, name: '良好 30%' },
        { value: 25, name: '中 25%' },
        { value: 20, name: '合格 20%' },
        { value: 15, name: '不合格 15%' },
      ],
    }
  ]
};

export function useFakePie() {
  const myChart = useRef<echarts.ECharts>()
  const chart = useRef<any>()

  useEffect(() => {
    myChart.current = echarts.init(chart.current)
    myChart.current?.setOption(option)
  }, [])

  return [chart]
}


// import { useEffect, useRef } from "react"
// import * as echarts from "echarts";

// const option = {
//   title: {
//     text: "仿真练",
//     left: "center",
//     top: "32%",
//     textStyle: {
//       color: "#32a4fa",
//       fontSize: 20,
//       align: "center"
//     }
//   },
//   color: ["#856bec", "#f46064", "#f28e1b", "#1bdb7c", "#32a4fa"],
//   legend: {
//     bottom: 0,
//     left: 'center',
//     textStyle: { color: "#fff", fontSize: 10 },
//     itemWidth: 15,
//     itemHeight: 8,
//   },
//   series: [
//     {
//       name: '仿真练',
//       type: 'pie',
//       radius: ['40%', '70%'],
//       center: ["50%", '40%'],
//       label: {
//         show: true,
//         fontSize: 12,
//         position: "inside",
//         color: "#fff",
//         formatter(v: any) {
//           return v.value + "%"
//         }
//       },
//       labelLine: {
//         show: false
//       },
//       itemStyle: {
//         borderRadius: 1,
//         borderColor: '#0f113a',
//         borderWidth: 2
//       },
//       data: [
//         { value: 25, name: '优秀' },
//         { value: 15, name: '良好' },
//         { value: 20, name: '中等' },
//         { value: 22, name: '合格' },
//         { value: 16, name: '不合格' },
//       ]
//     }
//   ]
// };

// export function useFakePie() {
//   const myChart = useRef<echarts.ECharts>()
//   const chart = useRef<any>()

//   useEffect(() => {
//     myChart.current = echarts.init(chart.current)
//     myChart.current?.setOption(option)
//   }, [])

//   return [chart]
// }
